<template>
  <div class="app-container">
    <el-row
      style="background-color: #f7f7f7;height:50px;font-size: 12px;font-weight: bold;line-height: 50px;padding-left: 12px">
      <el-col :span="4">
        基本信息
      </el-col>
      <el-col :span="12">
        说明
      </el-col>
      <el-col :span="8">
        操作
      </el-col>
    </el-row>
    <el-row
      style="height:50px;font-size: 12px;line-height: 50px;padding-left: 12px;border-bottom: 1px solid #e9e9e9">
      <el-col :span="4">
        {{zcsh.name}}
      </el-col>
      <el-col :span="12">
        {{zcsh.desc}}
      </el-col>
      <el-col :span="8">
        <el-switch
          v-model="zcsh.value=='1'"
          active-color="#13ce66"
          inactive-color="#ff4949"
          @change="settingStatusChange">
        </el-switch>
      </el-col>
    </el-row>
    <el-row
      style="height:50px;font-size: 12px;line-height: 50px;padding-left: 12px;border-bottom: 1px solid #e9e9e9">
      <el-col :span="4">
        {{kfdh.name}}
      </el-col>
      <el-col :span="12">
        {{kfdh.value}}
      </el-col>
      <el-col :span="8">
        <el-button type="text" @click="editTelphone">修改</el-button>
      </el-col>
    </el-row>
    <!--<el-row-->
    <!--style="height:50px;font-size: 12px;line-height: 50px;padding-left: 12px;border-bottom: 1px solid #e9e9e9">-->
    <!--<el-col :span="4">-->
    <!--{{zxzxmb.name}}-->
    <!--</el-col>-->
    <!--<el-col :span="12">-->
    <!--{{zxzxmb.desc}}-->
    <!--</el-col>-->
    <!--<el-col :span="8">-->
    <!--<el-select v-model="zxzxmb.value" placeholder="请选择">-->
    <!--<el-option-->
    <!--v-for="item in options"-->
    <!--:key="item.value"-->
    <!--:label="item.label"-->
    <!--:value="item.value">-->
    <!--</el-option>-->
    <!--</el-select>-->
    <!--</el-col>-->
    <!--</el-row>-->
    <el-dialog title="修改客服电话" :visible.sync="dialogFormVisible" top="10vh">
      <el-form :model="formData" style="width:400px" :rules="rules" ref="ruleForm">
        <el-form-item label="客服电话" :label-width="formLabelWidth" prop="code">
          <el-input v-model="formData.telphone" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleEditTelphone">修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped>


</style>

<script>

  import sysInfoApi from '@/api/sysInfoApi'

  export default {
    created() {
      this.listSysSetting()
    },
    data() {
      return {
        dialogFormVisible: false,
        sysSetting: [],
        zcsh: {
          id: '',
          code: '',
          name: '',
          desc: ''
        },
        zxzxmb: {
          id: '',
          code: '',
          name: '',
          desc: ''
        },
        kfdh: {
          id: '',
          code: '',
          name: '',
          desc: '',
          value: ''
        },
        formData: {}
      }
    },
    methods: {
      listSysSetting() {
        sysInfoApi.listSysSetting((res) => {
          this.sysSetting = res
          this.zcsh = this.sysSetting[0]
          this.zxzxmb = this.sysSetting[1]
          this.kfdh = this.sysSetting[2]
        }, () => {
        })
      },
      settingStatusChange(value) {
        let param = {
          id: this.zcsh.id,
          value: value ? '1' : '0'

        }
        sysInfoApi.updateSettingInfo(param, (res) => {
          this.zcsh.value = value ? '1' : '0'
          this.$message({
            message: '修改成功',
            type: 'success'
          })
        }, () => {
        })
      },
      editTelphone() {
        this.dialogFormVisible = true
      },
      handleEditTelphone() {
        let param = {
          id: this.kfdh.id,
          value: this.formData.telphone

        }
        sysInfoApi.updateSettingInfo(param, (res) => {
          this.kfdh.value = this.formData.telphone
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.dialogFormVisible = false
        }, () => {
        })
      }
    }
  }
</script>
